<template>
  <div class="list" v-for="(item, index) in fansList" :key="index">
    <div class="listLeft">
      <a-avatar :size="54" style="margin: 0 10px 0 5px" :src="item.imgHead" />
      <div>
        <div @click="gotoUserPage(item)">
          <router-link to="/user">
            {{ item.name }}
          </router-link>
        </div>
        <div style="font-size: 8px; color: #4682b4">
          <span>
            关注{{ item.followsNum }}
            <a-divider type="vertical" style="background: #4682b4" />
          </span>
          <span>
            粉丝{{ item.fansNum }}
            <a-divider type="vertical" style="background: #4682b4" />
          </span>
          <span>文章{{ item.AsNum }}</span>
        </div>
        <div style="font-size: 8px; color: #4682b4">
          收获了{{ item.numOfLikes }}个赞
        </div>
      </div>
    </div>
    <a-button
      type="primary"
      style="margin-right: 10px"
      ghost
      @click="doFollow(item)"
    >
      关注
    </a-button>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { doFollows } from "../../api/users";
import { message } from "ant-design-vue";
import VueEvent from "../../utils/event";

export default defineComponent({
  components: {},
  props: ["fans"],
  setup(props) {
    const fansList = ref(props.fans);

    const gotoUserPage = (item) => {
      // console.log(item.author);
      VueEvent.emit("gotoUserPage", {
        uname: item.name,
      });
    };

    const doFollow = (item) => {
      doFollows({
        url: "/users/doFollows",
        userid: item.uid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };
    return {
      doFollow,
      fansList,
      gotoUserPage,
    };
  },
});
</script>

<style scoped>
.list {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.listLeft {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>